let username = localStorage.getItem("uname")
document.querySelector('.mb-0.text-sm.font-weight-bold.username').innerText = username
getMsg()
backLogin()

async function getMsg() {
    let token = localStorage.getItem('token')

    try {
        let res = await axios({
            url: '/dashboard',
        })
        console.log(res.data)
        let data = res.data.data.overview
        let data1 = res.data.data.year
        let data2 = res.data.data.salaryData
        let data3 = res.data.data.groupData
        showList(data)
        showLinear(data1)
        showPies(data2)
        showGroup(data3['1'])
        clickGroup(data3)
        showGender(data2)
    } catch (err) {
    }
}

function showList(data) {
    let moneyBox = document.querySelector('.h3.font-weight-bold.mb-0.salary')
    moneyBox.innerHTML = data.salary
    let peopleBox = document.querySelector('.h3.font-weight-bold.mb-0.student_count')
    peopleBox.innerHTML = data.student_count
    let ageBox = document.querySelector('.h3.font-weight-bold.mb-0.age')
    ageBox.innerHTML = data.age
    let groupBox = document.querySelector('.h3.font-weight-bold.mb-0.group_count')
    groupBox.innerHTML = data.group_count
}

function backLogin() {
    document.querySelector('#logout').addEventListener('click', function () {
        pxmu.diaglog('是否要退出登陆', {
            congif: {
                animation: 'slidedeg', //自定义动画 动画名详见动画文档
            }
        }).then(function (res) {
            if (res.btn == 'right') {
                //点击了右侧按钮
                location.href = './login.html'
            } else {
                //点击了左侧按钮
            }
        });
    })
}

function showLinear(year) {
    // 初始化 ECharts 实例
    let chart = echarts.init(document.querySelector('#line'));

    // 定义图表配置项
    let option = {
        title: {
            text: '2022全学科薪资走势',
            top: 15,
            left: 15,
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: year.map(item => item.month),
            axisLine: { // 设置 x 轴线的样式
                lineStyle: {
                    type: 'dashed', // 设置线条类型为虚线
                    dashArray: [10, 20] // 定义虚线的实线段和空白段长度
                }
            }
        },
        yAxis: {
            type: 'value',
            splitLine: { // 设置 y 轴分割线的样式
                lineStyle: {
                    type: 'dashed', // 设置线条类型为虚线
                    dashArray: [10, 20] // 定义虚线的实线段和空白段长度
                }
            }
        },
        series: [{
            data: year.map(item => item.salary),
            type: 'line',
            smooth: true,
            lineStyle: {
                width: 5,
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: '#5c75f0' // 0% 处的颜色
                    }, {
                        offset: 1, color: '#479dee' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                }
            },
            areaStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: '#b2d7f7' // 0% 处的颜色
                    }, {
                        offset: 1, color: 'rgba(255, 255, 255, 0)' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                }
            },
            symbolSize: 10,
        }],
        grid: {
            top: 80,
            left: 100
        }
    };

    // 使用刚指定的配置项和数据显示图表。
    chart.setOption(option)
}

function showPies(salaryData) {
    let chart = echarts.init(document.querySelector('#salary'));
    option = {
        title: {
            text: '班级薪资分布图',
            top: 15,
            left: 15
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            bottom: '5%',
            left: 'center'
        },
        series: [
            {
                name: '薪资范围',
                type: 'pie',
                radius: ['50%', '70%'],
                avoidLabelOverlap: false,
                padAngle: 5,
                itemStyle: {
                    borderRadius: 10,
                    borderWidth: 10,
                    borderColor: '#fff'
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 30,
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: salaryData.map(item => {
                    return {
                        value: item.g_count,
                        name: item.label
                    }
                })
            }
        ],

    };
    chart.setOption(option)
}

function showGroup(groupData) {
    let chart = echarts.init(document.querySelector('#lines'));
    option = {
        legend: {
            show: false
        },
        tooltip: {},
        dataset: {
            source:
            {
                'product': groupData.map(item => item.name),
                '期望薪资': groupData.map(item => item.hope_salary),
                '薪资': groupData.map(item => item.salary)
            }

        },
        xAxis: {
            type: 'category',
            axisLine: { // 设置 x 轴线的样式
                lineStyle: {
                    type: 'dashed', // 设置线条类型为虚线
                    dashArray: [10, 20] // 定义虚线的实线段和空白段长度
                }
            }
        },
        yAxis: {
            type: 'value',
            splitLine: { // 设置 y 轴分割线的样式
                lineStyle: {
                    type: 'dashed', // 设置线条类型为虚线
                    dashArray: [10, 20] // 定义虚线的实线段和空白段长度
                }
            }
        },
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [{
            type: 'bar',
            itemStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: '#34D39A' // 0% 处的颜色
                    }, {
                        offset: 1, color: 'rgba(52,211,154,0.2)' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                }
            }
        },
        {
            type: 'bar',
            itemStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: '#499FEE' // 0% 处的颜色
                    }, {
                        offset: 1, color: 'rgba(73,159,238,0.2)' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                }
            }
        }

        ],
        grid: {
            left: 150
        }

    };
    chart.setOption(option)
}

function clickGroup(groupDataNum) {
    console.log(groupDataNum)
    document.querySelector('#btns').addEventListener('click', function (e) {
        e.preventDefault()
        // console.log(e.target)
        if (e.target.tagName === 'BUTTON') {
            // console.log(e.target.textContent);
            showGroup(groupDataNum[e.target.textContent])
            document.querySelector('.btn-blue').classList.remove('btn-blue')
            e.target.classList.add('btn-blue')
        }
    })
}

function showGender(salaryData) {
    let chart = echarts.init(document.querySelector('#gender'));
    option = {
        color:[
            '#35d59b',
            '#ffa120',
            '#489bf9',
            '#3cbcfc'
          ],
        title: [
            {
                text: '男女薪资分布图',
                top: 15,
                left: 15,
                textStyle: {
                    fontSize: 20
                }
            },
            {
                text: '男生',
                top: 230,
                left: '44%',
                textStyle: {
                    fontSize: 14
                }
            }, {
                text: '女生',
                top: 450,
                left: '44%',
                textStyle: {
                    fontSize: 14
                }
            },
        ],

        tooltip: {
            trigger: 'item',
            
        },
        legend: {
            show: false
        },
        series: [
            // 第一个饼图
            {
                name: '男生薪资分布',
                type: 'pie',
                radius: ['25%', '35%'],
                center: ['50%', '28%'], // 调整饼图的位置
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: true, // 显示标签
                    position: 'outside', // 将标签放置在扇区外侧
                    formatter: '{b}' // 标签格式化器，显示名称、值和百分比
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: '20',
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: true, // 显示指示线
                    length: 10, // 指示线第一段的长度
                    length2: 10, // 指示线第二段的长度
                    lineStyle: {
                        width: 2, // 线宽
                        type: 'solid' // 线条类型
                    }
                },
                data: salaryData.map(item=>{ 
                    return {
                    value: item.b_count,
                    name: item.label
                }})
            },
            // 第二个饼图
            {
                name: '女生薪资分布',
                type: 'pie',
                radius: ['25%', '35%'],
                center: ['50%', '72%'], // 调整饼图的位置
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: true, // 显示标签
                    position: 'outside', // 将标签放置在扇区外侧
                    formatter: '{b}' // 标签格式化器，显示名称、值和百分比
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: '20',
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: true, // 显示指示线
                    length: 10, // 指示线第一段的长度
                    length2: 10, // 指示线第二段的长度
                    lineStyle: {
                        width: 2, // 线宽
                        type: 'solid' // 线条类型
                    }
                },
                data: salaryData.map(item=>{ 
                    return {
                    value: item.g_count,
                    name: item.label
                }})
            }
        ]
    };
    chart.setOption(option)
}